<template>
	<!-- 语言选择器 -->
	<el-dropdown trigger="click" @command="handleLanguageChange">
		<div class="lang-select--style">
			<svg-icon icon-class="language" />
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :disabled="appStore.language === 'zh_CN'" command="zh_CN"> 中文 </el-dropdown-item>
				<el-dropdown-item :disabled="appStore.language === 'en_US'" command="en_US"> English </el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/store/modules/app';
import SvgIcon from '@/components/SvgIcon/index.vue';

const appStore = useAppStore();
const { locale } = useI18n();

const message = {
	zh_CN: '切换语言成功！',
	en_US: 'Switch Language Successful!'
};
const handleLanguageChange = (lang) => {
	locale.value = lang;
	appStore.changeLanguage(lang);
	ElMessage.success(message[lang] || '切换语言成功！');
};
</script>

<style lang="scss" scoped>
.lang-select--style {
	font-size: 18px;
	line-height: 50px;
}
</style>
